import React, { Fragment } from 'react'
import {
  StyleSheet,
  View,
  ScrollView,
  Text
} from 'react-native'
import { ScaleT, ScaleS } from 'src/utils/ScreenUtil'
import BasePage from 'src/pageP/base/base-page/index'
import AdministratorsHeader from './components/AdministratorsHeader'
import AdministratorsBody from './components/AdministratorsBody'
import {
  getMasterSearch,
  getOperatorWorkmates,
  getApplyComeInOperatorList,
  waitUnbindOperatorList
} from '@utils/RequestAPI'
import { UPDATE_USERINFO_ACTION } from '@store/actions/userinfo'
import CustomButton from 'src/components/button/CustomButton'
import CustomImage from 'src/components/image/CustomImage'

/* redux */
import { connect } from 'react-redux'
const mapActiontoProps = dispatch => ({
  updateUserInfo (payload) {
    dispatch(UPDATE_USERINFO_ACTION(payload))
  }
})
@connect(
  ({ userinfo, mineCompanyStore, BMineCenterStore }) => ({
    userinfo,
    BMineCenterStore,
    ...mineCompanyStore
  }),
  mapActiontoProps
)
class Administrators extends BasePage {
  state = {
    header: {},
    checkbox: 0,
    comeInOperatorList: [],
    operatorLis: [],
    workmatesList: [],
    transferMaster: false,
    masterSearch: false
  }

  transferMasterFalse = () => {
    this.setState({
      transferMaster: false
    })
  }

  transferMasterFn = () => {
    this.setState({
      transferMaster: !this.state.transferMaster
    })
  }

  checkboxFn = ({ type }) => {
    if (type !== 0) {
      this.setState({
        checkbox: type
      })
    } else {
      this.setState({
        checkbox: type,
        transferMaster: false
      })
    }
  }

  childRender () {
    const { checkbox, comeInOperatorList, workmatesList, transferMaster, masterSearch, operatorLis } = this.state
    const { BMineCenterStore, userinfo } = this.props
    return (
      <View styles={styles.container}>
        <AdministratorsHeader
          userData={userinfo}
          companyId={BMineCenterStore.haveCompanyApply.companyId}
          transferMaster={transferMaster}
          comeInOperatorList={comeInOperatorList}
          masterSearch={masterSearch}
          checkboxFn={this.checkboxFn}
          workmatesList={workmatesList}
          masterSearchFn={this.masterSearchFn}
          operatorListFn={this.operatorListFn}
          onModalHide={this.onModalHide}
          userId={userinfo.B.userId}
          transferMasterFalse={this.transferMasterFalse}
          checkbox={checkbox} />
        <ScrollView style={{ height: ScaleS(480) }}>
          <AdministratorsBody
            jumpVip={this.jumpVip}
            companyId={BMineCenterStore.haveCompanyApply.companyId}
            transferMasterFalse={this.transferMasterFalse}
            getApplyComeInOperatorList={this.getApplyComeInOperatorList}
            masterSearchFn={this.masterSearchFn}
            operatorListFn={this.operatorListFn}
            userId={userinfo.B.userId}
            transferMaster={transferMaster}
            masterSearch={masterSearch}
            workmatesList={workmatesList}
            comeInOperatorList={comeInOperatorList}
            operatorLis={operatorLis}
            checkbox={checkbox} />
        </ScrollView>

      </View>
    )
  }

  // renderNavigationBarChild = () => {
  //   const { checkbox, transferMaster, masterSearch } = this.state
  //   return (
  //     <Fragment>
  //       {
  //         (checkbox === 0 && masterSearch) && <CustomButton onPress={this.transferMasterFn} style={styles.administratorsHeaderRight}>
  //           <CustomImage style={styles.administratorsHeaderRightIcon} source={require('@/imgC/company/turnIcon.png')} />
  //           <Text style={styles.headerText}>{transferMaster ? '取消转让' : '转让管理员'}</Text>
  //         </CustomButton>
  //       }
  //     </Fragment>
  //   )
  // }

  onModalHide = confirmed => {
    if (confirmed) {
      this.props.updateUserInfo({
        role: 'C'
      })
      this.props.navigation.navigate('CMainNavigator')
    }
  }

  operatorListFn = (companyId) => {
    const { userinfo } = this.props
    getOperatorWorkmates({ params: { companyId: companyId, userId: userinfo.userId } }).then((data) => {
      this.setState({
        workmatesList: data.data
      })
    })
  }

  masterSearchFn = (companyId) => {
    getMasterSearch({ params: { companyId: companyId } }).then((data) => {
      if (data.data.userId === this.props.userinfo.B.userId) {
        this.waitUnbindOperatorList(companyId)
        this.getApplyComeInOperatorList(companyId)
      }
      this.setState({
        transferMaster: !data.data.userId === this.props.userinfo.B.userId,
        masterSearch: data.data.userId === this.props.userinfo.B.userId
      })
    })
  }

  getApplyComeInOperatorList = (companyId) => {
    getApplyComeInOperatorList({ header: { userId: this.props.userinfo.B.userId }, params: { companyId: companyId } }).then((data) => {
      this.setState({
        comeInOperatorList: data.data
      })
    })
  }

  waitUnbindOperatorList = () => {
    const { BMineCenterStore: { haveCompanyApply: { companyId } } } = this.props
    waitUnbindOperatorList({ params: { companyId: companyId } }).then((data) => {
      this.setState({
        operatorLis: data.data
      })
    })
  }

  componentWillUnmount () {
    this.props.navigation.state.params.getMyCompanyBaseInfo()
  }

  componentDidMount () {
    // this.props.doRequestCompanyDetail()
    const { BMineCenterStore: { haveCompanyApply: { companyId } } } = this.props
    this.operatorListFn(companyId)
    this.masterSearchFn(companyId)
  }

  prewClick = () => {
    console.log('prewClick')
  }

  jumpFn = () => {
    this.props.navigation.navigate('BMineCompany')
  }

  jumpVip = () => {
    this.props.navigation.navigate('BMemberOpen')
  }
}

export default Administrators

const styles = StyleSheet.create({
  container: {
    flex: 1,
    height: '100%'
  },
  administratorsHeaderRight: {
    position: 'absolute',
    right: ScaleS(20),
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center'
  },
  administratorsHeaderRightIcon: {
    marginRight: ScaleS(6)
  },
  headerText: {
    color: '#3C3C3C',
    fontSize: ScaleT(14)
  }
})
